<template>
	<el-card class="blog">
		<el-table :data="bloglist" border class="eltable" height="1000">
			<el-table-column type="index" label="#" width="50" align="center" />
			<el-table-column prop="content" label="内容">
				<template #default="scope">
					<div class="blog_content" v-html="scope.row.content"></div>
				</template>
			</el-table-column>
			<el-table-column
				prop="number"
				label="浏览数"
				width="100"
				align="center"
			/>
			<el-table-column
				prop="love"
				label="点赞数"
				width="100"
				align="center"
			/>
			<el-table-column
				prop="date"
				label="发布时间"
				width="120"
				align="center"
			>
				<template #default="scope">
					{{ setDate(scope.row.date, "yyyy-MM-dd") }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="80" align="center">
				<template #default="scope">
					<el-button
						type="primary"
						size="small"
						@click="updatedata(scope.row._id)"
						>更新</el-button
					><br />
					<el-button
						type="danger"
						size="small"
						@click="deletedata(scope.row)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:currentPage="options.skip + 1"
			:page-size="options.limit"
			:page-sizes="[10, 15, 20]"
			:small="true"
			background
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</el-card>
</template>

<script>
import { apigetbloglist, apideleteblog } from "@/network/blog";
import { deleteimg } from "@/network/postimg";

import { reactive, toRefs } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import useFormTime from "@/hook/useFormTime";
import { useRouter } from "vue-router";

export default {
	name: "Blog",
	setup() {
		// 时间格式化
		const { setDate } = useFormTime();
		// router
		const router = useRouter();
		const data = reactive({
			bloglist: [],
			//每页显示条目个数
			// 总条目数
			total: 12,
			// 请求参数
			options: {
				limit: 5,
				skip: 0,
				key: "",
			},
		});

		onMounted(() => {
			getbloglist();
		});

		// 获取blog列表
		const getbloglist = () => {
			apigetbloglist(data.options).then((res) => {
				console.log(res);
				data.bloglist = res.data.blog;
				data.total = res.data.total;
			});
		};

		// 更新
		const updatedata = (id) => {
			router.push({ path: "/publish", query: { _id: id } });
		};

		// 删除
		const deletedata = (row) => {
			ElMessageBox.confirm("确定删除该文章吗?", "确认删除", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					console.log(111);
					let delete_img = [];
					delete_img.push(row.image);
					const hasimg = row.content.match(
						/(?<=img src=")http.*?(?=")/gi
					);
					if (hasimg) {
						delete_img.push(...hasimg);
					}

					apideleteblog({ _id: row._id }).then((res) => {
						if (res.status == 200) {
							ElMessage({
								type: "success",
								message: "删除成功",
							});
							getbloglist();
							deleteimg(delete_img);
						}
					});
				})
				.catch(() => {
					ElMessage({
						type: "info",
						message: "取消删除",
					});
				});
		};

		// pageSize 改变时触发
		const handleSizeChange = (size) => {
			data.options.limit = size;

			getbloglist();
		};

		//current-change 改变时触发
		const handleCurrentChange = (page) => {
			let datalength = data.options.limit;
			let skip = datalength * (page - 1);
			data.options.skip = skip;

			getbloglist();
		};

		return {
			...toRefs(data),
			updatedata,
			deletedata,
			handleSizeChange,
			handleCurrentChange,
			setDate,
		};
	},
};
</script>

<style lang="scss" scoped>
.blog_content {
	max-width: 200px;
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	word-break: break-all;
}
.eltable {
	width: 100%;
	height: 100%;
	max-height: calc(100vh - 182px);
	:deep(.blog_content img) {
		display: block;
		width: 80px;
	}
}
.el-pagination {
	margin-top: 10px;
}
</style>
